﻿<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="keywords" content="jQuery, Switchable, Tabs, Slide, Scrollable, UI, Plugin, Ajax" />
	<meta name="description" content="jQuery.Switchable是一款整合了Tabs、Slide、Scrollable等常见UI组件的jQuery插件。它有简单易用的API、可灵活配置的Configuration，支持自定义Effect，支持自主开发Plugin。" />
	<link href="../../css/css.css" rel="stylesheet" type="text/css" />
	<link href="../../css/demo.css" rel="stylesheet" type="text/css" />

	<!-- syntaxhighlighter -->
	<link href="../../../asset/styles/shCore.css" rel="stylesheet" type="text/css" />
	<link href="../../../asset/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

	<link href="/asset/favicon.png" rel="icon" type="image/png" />
	<title>Demos | jQuery.Switchable</title>
	<script type="text/javascript" src="../../../asset/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="../../js/jquery.switchable[all].min.js"></script>

	<!-- syntaxhighlighter -->
	<script type="text/javascript" src="../../../asset/scripts/shCore.js"></script>
	<script type="text/javascript" src="../../../asset/scripts/shBrushJScript.js"></script>
	<script type="text/javascript" src="../../../asset/scripts/shBrushXml.js"></script>

	<script type="text/javascript">
	var w;
	$.switchable.addEffect("h-accordion", function(i, done) {
		var self = this,
			items = self.getPanels(),
			lastItem = items.eq(self.getIndex()),
			thisItem = self.getVisiblePanel(i);
		
		if ( !w ) {
			w = items.first().width();
		}
		
		if ( lastItem.is(":animated") ) {
			lastItem.stop(true);
		}
		lastItem.animate({ width: 0 }, function() {
			$(this).hide();
		});
		thisItem.animate({ width: w }, function() { 
			$(this).show();
			done.call();
		});
	});

	$(function(){
		$(".h-accordion").switchable(".h-accordion > div", {
			triggers: "img",
			triggerType: "click",
			effect: "h-accordion",
			speed: .3
		}).children("div:gt(0)").css("width", "0px");
	});
	
	// syntaxhighlighter
	SyntaxHighlighter.config.clipboardSwf = "../asset/scripts/clipboard.swf";
	SyntaxHighlighter.all();
	</script>
</head>

<body>
<div id="header">
	<div id="logo"></div>
	<div id="nav">
		<a href="../../../switchable">Home</a>
		<a href="../../download.html">Download</a>
		<a href="../" class="current">Demos</a>
		<a href="http://t.sina.com.cn/jsw0528" title="Follow me on Sina" class="sina" target="_blank">Sina</a>
		<a href="http://twitter.com/jsw0528" title="Follow me on Twitter" class="twitter" target="_blank">Twitter</a>
	</div>
</div>

<div class="wrap clearfix">
	<h2>Horizontal Accordion</h2>
	<br />
	
	<div class="h-accordion">
		<img src="../../image/streaminge.png" />
		<div>
			<b>First Panel</b>
			<i>Content #1</i>
		</div>
	
		<img src="../../image/flash.png" />
		<div>
			<b>Second Panel</b>
			<i>Content #2</i>
		</div>
	
		<img src="../../image/streaming.png" />
		<div>
			<b>Third Panel</b>
			<i>Content #3</i>
		</div>
	</div>
	
	<h3>jQuery Code:</h3>
	<pre class="brush: js;">
	// 添加 h-accordion 效果
	var w;
	$.switchable.addEffect("h-accordion", function(i, done) {
		var self = this,
			items = self.getPanels(),
			lastItem = items.eq(self.getIndex()),
			thisItem = self.getVisiblePanel(i);
		
		if ( !w ) {
			w = items.first().width();
		}
		
		if ( lastItem.is(":animated") ) {
			lastItem.stop(true);
		}
		lastItem.animate({ width: 0 }, function() {
			$(this).hide();
		});
		thisItem.animate({ width: w }, function() { 
			$(this).show();
			done.call();
		});
	});
	
	$(function(){
		$(".h-accordion").switchable(".h-accordion > div", {
			triggers: "img",
			triggerType: "click",
			effect: "h-accordion",
			speed: .3
		})
		// 为第二和第三个 Panel 设置初始宽度
		.children("div:gt(0)").css("width", "0px");
	});
	</pre>

	<h3>HTML Code:</h3>
	<pre class="brush: html;">
	&lt;div class="h-accordion"&gt;
		&lt;img src="../../image/streaminge.png" /&gt;
		&lt;div&gt;
			&lt;b&gt;First Panel&lt;/b&gt;
			&lt;i&gt;Content #1&lt;/i&gt;
		&lt;/div&gt;
	
		&lt;img src="../../image/flash.png" /&gt;
		&lt;div&gt;
			&lt;b&gt;Second Panel&lt;/b&gt;
			&lt;i&gt;Content #2&lt;/i&gt;
		&lt;/div&gt;
	
		&lt;img src="../../image/streaming.png" /&gt;
		&lt;div&gt;
			&lt;b&gt;Third Panel&lt;/b&gt;
			&lt;i&gt;Content #3&lt;/i&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	</pre>
</div>

<p class="copyright">
<script type="text/javascript" src="http://s122.cnzz.com/stat.php?id=1946178&web_id=1946178&show=pic1"></script>
&copy;2010 IlikejQuery.com
</p>
</body>
</html>
